<section class="section-info">
  <div>all select：{{ (lvTable.getSelection() | userProp) || 'none' }}</div>
  <div>current select：{{ (lvTable.getRenderSelection() | userProp) || 'none' }}</div>
</section>
<p>
  <button lv-button (click)="updateData()">update</button>
  <button lv-button (click)="clearSelection()">clear</button>
</p>
<lv-treetable
  [lvData]="data"
  #lvTable
  [lvPaginator]="page"
  lvCompareWith="data.id"
  lvSort
  #sort="lvSort"
  [lvSortDirct]="sort"
  lvSelectionMode="multiple"
  [lvSelection]="selection"
  (lvSortChange)="page.jumpToFisrtPage()"
  (lvSelectionChange)="selectionChange($event)"
  (lvStateChange)="stateChange($event)"
>
  <thead>
  <tr>
    <th lvShowCheckbox lvCellKey="data.name">Name</th>
    <th lvCellKey="data.age">Age</th>
    <th lvCellKey="data.random" lvShowSort lvShowCustom>
      <span lv-overflow>Random : long long long long long long long long long long long name</span>
      <div lv-tooltip="long name auto tips" lvCustom>
        <i lv-icon="icon-help"></i>
      </div>
    </th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: lvTable.renderData, level: 0 }"></ng-container>
  <ng-template #bodyContentTpl let-data let-level="level">
    <ng-container *ngFor="let item of data">
      <tr>
        <td
          [lvRowData]="item"
          lvShowCheckbox
          [lvShowExpanded]="item.children?.length"
          [(lvExpanded)]="item.expanded"
          [lvExpandedToggleIcon]="{ true: 'lv-icon-arrow-down', false: 'lv-icon-arrow-right' }"
          [lvDisabled]="item.disabled"
          [lvPaddingLeft]="level * 24 + 'px'"
        >
          <span lv-overflow>Name:{{ item.data.name }}: long long long long long long long long name</span>
        </td>
        <td>{{ item.data.age }}</td>
        <td>{{ item.data.random }}</td>
      </tr>
      <ng-container *ngIf="item.expanded && item.children?.length">
        <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: item.children, level: level + 1 }"></ng-container>
      </ng-container>
    </ng-container>
  </ng-template>
  </tbody>
</lv-treetable>
<lv-paginator #page lvPageSize="5"></lv-paginator>
